<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html class="no-js" lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>登录 && 注册</title>
    <meta name="robots" content="noindex, follow" />
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="assets/images/favicon.ico">

    <!-- CSS
	============================================ -->
    <!-- google fonts -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900" rel="stylesheet">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="assets/css/vendor/bootstrap.min.css">
    <!-- Icon Font CSS -->
    <link rel="stylesheet" href="assets/css/vendor/bicon.min.css">
    <!-- Flat Icon CSS -->
    <link rel="stylesheet" href="assets/css/vendor/flaticon.css">
    <!-- audio & video player CSS -->
    <link rel="stylesheet" href="assets/css/plugins/plyr.css">
    <!-- Slick CSS -->
    <link rel="stylesheet" href="assets/css/plugins/slick.min.css">
    <!-- nice-select CSS -->
    <link rel="stylesheet" href="assets/css/plugins/nice-select.css">
    <!-- perfect scrollbar css -->
    <link rel="stylesheet" href="assets/css/plugins/perfect-scrollbar.css">
    <!-- light gallery css -->
    <link rel="stylesheet" href="assets/css/plugins/lightgallery.min.css">
    <!-- Main Style CSS -->
    <link rel="stylesheet" href="assets/css/style.css">

</head>

<body class="bg-transparent">

<main>
    <div class="main-wrapper pb-0 mb-0">
        <div class="timeline-wrapper">
            <div class="timeline-header">
                <div class="container-fluid p-0">
                    <div class="row no-gutters align-items-center">
                        <div class="col-lg-6">
                            <div class="timeline-logo-area d-flex align-items-center">
                                <div class="timeline-logo">
                                    <a href="index.html">
                                        <img src="assets/images/logo/logo.png" alt="timeline logo">
                                    </a>
                                </div>
                                <div class="timeline-tagline">
                                    <h6 class="tagline">欢迎来到xxx网站，这里可以分享你的趣事</h6>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="login-area">
                                <div class="row align-items-center" >
                                    <div class="col-12 col-sm">
                                        <p class="lead" style="color: #D6E9C6;">人生得一知已足矣，斯世当以同怀视之。——鲁迅</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="timeline-page-wrapper">
            <div class="container-fluid p-0">
                <div class="row no-gutters">
                    <div class="col-lg-6 order-2 order-lg-1">
                        <div class="timeline-bg-content bg-img" data-bg="assets/images/timeline/luoxiaohei.jpg">

                        </div>
                    </div>
                    <div class="col-lg-6 order-1 order-lg-2 d-flex align-items-center justify-content-center bg-img" data-bg="assets/images/customize/gezi.png">
                        <div class="signup-form-wrapper">
                            <h1 class="create-acc text-center">从这儿开始</h1>
                            <div class="signup-inner text-center">
                                <h3 class="title">登录</h3>
                                <form class="signup-inner--form">
                                    <div class="row">
                                        <div class="col-12">
                                            <span style="margin-left: inherit;float: left;height: 20px;" id="nameMsg"></span>
                                        </div>
                                        <div class="col-12">
                                            <input id="uname" type="text" class="single-field" placeholder="先输入你的账号~">
                                        </div>
                                        <div class="col-12">
                                            <input id="pwd" type="password" class="single-field" placeholder="密码我不看">
                                        </div>
                                        <div class="col-12">
                                            <span style="margin-left: inherit;float: left;height: 20px;" id="codeMsg"></span>
                                        </div>
                                        <div class="col-lg-6">
                                            <input type="text" class="single-field" placeholder="输入验证码" name="code" />
                                        </div>
                                        <div class="col-lg-6">
                                            <img src="/sys/getCode" id="code">
                                        </div>
                                        <div class="col-12">
                                            <button type="button" id="mysub" class="submit-btn btn-lg" disabled >亦可搜</button>
                                        </div>
                                        <div class="col-12">
                                            <button type="button" class="submit-btn btn-lg">没有账号(°ー°〃)</button>
                                        </div>
                                    </div>
                                    <h6 class="terms-condition">我我我o(*////▽////*)o 忘记密码了 <a href="#">点我找回</a></h6>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
</main>

<!-- JS
============================================ -->

<!-- Modernizer JS -->
<script src="assets/js/vendor/modernizr-3.6.0.min.js"></script>
<!-- jQuery JS -->
<script src="assets/js/vendor/jquery-3.3.1.min.js"></script>
<!-- Popper JS -->
<script src="assets/js/vendor/popper.min.js"></script>
<!-- Bootstrap JS -->
<script src="assets/js/vendor/bootstrap.min.js"></script>
<!-- Slick Slider JS -->
<script src="assets/js/plugins/slick.min.js"></script>
<!-- nice select JS -->
<script src="assets/js/plugins/nice-select.min.js"></script>
<!-- audio video player JS -->
<script src="assets/js/plugins/plyr.min.js"></script>
<!-- perfect scrollbar js -->
<script src="assets/js/plugins/perfect-scrollbar.min.js"></script>
<!-- light gallery js -->
<script src="assets/js/plugins/lightgallery-all.min.js"></script>
<!-- image loaded js -->
<script src="assets/js/plugins/imagesloaded.pkgd.min.js"></script>
<!-- isotope filter js -->
<script src="assets/js/plugins/isotope.pkgd.min.js"></script>
<!-- Main JS -->
<script src="assets/js/main.js"></script>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<script type="text/javascript">
    $(function (){
        $("#uname").change(function () {
            //ajax请求
            // $(xxxx).text() .html() .val()  小括号中没有值就是取值,有值就是赋值
            var ename =$("#uname").val();
            $.get("/user/findUserByName?username="+ename,function (result) {
                //OK NOOK
                if (result=='OK'){
                    //prop 专门用于
                    $("#mysub").prop("disabled",false);
                    $("#nameMsg").text("欢迎回来╰(￣▽￣)╭").css({"color":"green"})
                }else{
                    $("#mysub").prop("disabled",true);
                    $("#nameMsg").text("他是在这个星球吗？Σ( ° △ °|||)︴").css({"color":"red"})
                }
            });
        });

        $("#code").click(function () {
            $(this).attr("src","/sys/getCode?c="+Math.random());
        });
        $("[name='code']").change(function () {
            var code = $(this).val();
            $.get("/sys/checkCode?code=" + code, function (result) {
                if (result == "OK") {
                    $("#codeMsg").text("验证码正确").css({"color": "green"})
                } else {
                    $("#codeMsg").text("验证码错误").css({"color": "red"})
                    $("#code").click();
                }
            });
        });

        $("#mysub").click(function (){
            var username = $("#uname").val();
            var password = $("#pwd").val();
            console.log("登录操作");
            console.log(username);
            console.log(password);
            $.get("/user/login?username="+username+"&password="+password);
            alert("hello");
        });

    })
</script>

</body>

</html>